<script lang="ts" setup>
import type {FormInstance, FormRules} from 'element-plus';
import * as liaisonApi from '@/api/business/liaison'
import {DICT_TYPE, getDictOptions} from "@/utils/dict";

defineOptions({name: "LiaisonForm"})
const {t} = useI18n() // 国际化
const message = useMessage()
const emit = defineEmits(['success'])
const disabled = computed(() => {
  return type.value === 'detail'
})
const type = ref('detail')
const title = ref('详情')
const dialogVisible = ref(false)
const formLoading = ref(false)


const formRef = useTemplateRef<FormInstance>('formRef')
const form = ref({
  username: void 0,
  phone: void 0,
  sex: void 0,
  remark: void 0,
})
const rules = ref<FormRules>({
  username: [
    {required: true, message: '请输入联系人名称', trigger: 'blur'},
  ],
  phone: [
    {required: true, message: '请输入联系方式', trigger: 'blur'},
  ],
  sex: [
    {required: true, message: '请选择性别', trigger: 'change'},
  ],
  remark: [
    {required: true, message: '请输入备注', trigger: 'blur'},
  ]
})

function handleClose() {
  dialogVisible.value = false
  formRef.value?.resetFields()
  form.value = {
    username: void 0,
    phone: void 0,
    sex: void 0,
    remark: void 0,
  }
}

async function open(state: 'add' | 'edit' | 'detail' = "detail", id?: string) {
  type.value = state
  title.value = t('action.' + state)
  dialogVisible.value = true
  if (id) {
    formLoading.value = true
    try {
      form.value = await liaisonApi.getLiaison(id)
    } finally {
      formLoading.value = false
    }
  }
}

async function handleSubmit() {
  try {
    await formRef.value?.validate()
    if (type.value === 'add') {
      await liaisonApi.createLiaison(form.value)
      message.success(t('common.createSuccess'))
    } else if (type.value === 'edit') {
      await liaisonApi.updateLiaison(form.value)
      message.success(t('common.updateSuccess'))
    }
    emit('success')
    handleClose()
  } catch (e) {
    console.log(e)
  }
}

defineExpose({
  open
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title
    top="5vh"
    width="50%"
    @close="handleClose"
  >
    <el-form ref="formRef" v-loading="formLoading" :inline="true" :model="form"
             :rules class="-mb-15px" label-width="auto">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item class="w-100%" label="联系人名称" prop="username">
            <el-input v-model="form.username" :disabled clearable
                      placeholder="请输入联系人名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="w-100%" label="联系方式" prop="phone">
            <el-input v-model="form.phone" :disabled clearable
                      placeholder="请输入联系方式"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="w-100%" label="性别" prop="sex">
            <el-select v-model="form.sex" :disabled class="!w-240px" clearable
                       placeholder="请选择性别">
              <el-option v-for="item in getDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
                         :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="w-100%" label="备注" prop="remark">
            <el-input v-model="form.remark" :disabled clearable placeholder="请输入备注"
                      type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>

</style>
